<template>
	<div class="page-wrapper">
		<div class="order-line border">
			<span class="fl">报修人姓名</span>
			<span class="fr">{{user.userName}}</span>
		</div>
		<div class="order-line" id="phone_container" style="height: 1rem; line-height: 1rem; padding: 0 .4rem">
			<span class="fl vertical" >报修人手机</span>
			<span class="fr vertical">
				<input v-model="user.userPhone">
			</span>
		</div>
		<div class="order-line margin border location">
			<div class="overflow">
				<span class="fl">徐汇校区</span>
				<!-- <span class="fr txt-grey">手动选择校区</span> -->
			</div>
			<div id="location_container">
				<input type="" placeholder="A"
				v-model="location.building"
>栋
				<span>——</span>
				<input type="" placeholder="一"
				v-model="location.floor"
>层
				<span>——</span>
				<input type="" placeholder="120"
				v-model="location.room"
>室
			</div>
			<div id="direction_container">
				<span v-for="d in directions"
				:class="{active: d.name == direction}"
				@click="direction = d.name">{{d.name}}</span>
			</div>
		</div>
		<div class="order-line margin replyTxt">
			<textarea class="c-textarea"
			placeholder="请填写故障补充描述"
			v-model="description"></textarea>
			<recordAudio @recordId="record"></recordAudio>
		</div>
		<addImg @clickImg = clickImg :max="5"
		@imgChange = imgChange></addImg>
		<div class="order-line margin border select-container">
			<span class="fl">提交报修单至</span>
			<select class="fr"
			:class="{empty: !assign.selected}"
			v-model="assign.selected">
				<option v-for="d in assign.departments"
				:value="d.id"
				v-show="d.id !== 'tip'">{{d.name}}</option>
			</select>
		</div>
		<div class="c-btn biggest reverse"
		:class="{disabled:uploading}"
		@click="post">
			<span v-if="!uploading">提交报修单</span>
			<span v-else>提交中…</span>
		</div>
		<!-- 这里弹出大照片先单独写了 -->
		<transition name="fade">
			<div class="img-pop-bg" v-if="activeImg"
			@click="activeImg = ''">
				<img @click.stop :src="activeImg">
			</div>
		</transition>
	</div>
</template>
<script>
	import addImg from './addImg'
	import recordAudio from './OrderParts/RecordAudio'
	import {getUser,getDept} from './assets/js/global.js'
	import {tip} from './assets/js/tip.js'
	import {myAlert, myHttp} from './assets/js/utils.js'
	export default{
		name: 'newOrder',
		data(){
			return{
				user: {
					userName: '',
					userPhone: ''
				},
				location:{
					building: '',
					floor: '',
					room: ''
				},
				directions: [{
					name: '内',
					id: 1
				},{
					name: '外',
					id: 2
				},{
					name: '附近',
					id: 3
				}],
				direction: '内',
				description: '',
				assign:{
					departments: [{
						name: '请选择报修部门',
						id: 'tip'
					}],
					selected: 'tip'
				},
				imgs:[],
				activeImg: '',
				mediaId: '',
				uploading: false
			}
		},
		mounted(){
			getUser().then((user) => {
				this.user = user;
			})
			getDept().then((dept) => {
				let depts = [];
				Object.values(dept).forEach((d) => {
					this.assign.departments.push(d)
				});
				this.assign.departments.push({
					name: '我不确定',
					id: ''
				})
			})
		},
		methods:{
			clickImg(img){
				this.activeImg = img;
			},
			imgChange(files){
				this.imgs = files;
			},
			record(recordId){
				this.mediaId = recordId;
			},
			check(){
				if(!this.user.userPhone) myAlert.small(tip.EMPTY_PHONE_TIP);
				else if(!this.location.building || !this.location.floor || !this.location.room) myAlert.small(tip.EMPTY_ADDRESS);
				else if(!this.description) myAlert.small(tip.EMPTY_DES);
				else if(this.assign.selected === 'tip') myAlert.small(tip.EMPTY_DEPT);
				else return true;
				return false;
			},
			post(){
				if(this.uploading) return;
				if(!this.check()) return;
				var fm = new FormData();
				this.imgs.forEach((img) => {
					fm.append('imageFiles', img, `${Math.ceil(Date.now()*Math.random()*10)}.jpg`);
				})
				fm.append('orgId', this.assign.selected);
				fm.append('userId', this.user.userId);
				fm.append('userPhone', this.user.userPhone);
				fm.append('address', `${this.location.building}栋${this.location.floor}层${this.location.room}室${this.direction}`);
				fm.append('explains', this.description);
				fm.append('mediaId', this.mediaId);
				fm.append('licenseCode', 'E2ECBC62529F0D090EA369022622F74B');
				myHttp('addNewRepair.do', fm, () => {
					this.uploading = true;
				}).then((r) => {
					if(r.failed) {
						this.uploading = false;
						return;
					}
					this.$router.push({path:'/repair/list/user'});
				})
			}
		},
		computed:{
			// 并不会动态改变
			checkAll(){
				console.log(this.location.building && this.location.floor && this.location.room && this.description && this.assign.selected)
				if(this.location.building && this.location.floor && this.location.room && this.description && this.assign.selected) return true;
			}
		},
		components: {addImg, recordAudio}
	}
</script>
<style lang='less' scoped>
	#phone_container{
		input{
			font-size: 0.37rem;
			border: none;
			text-align: right;
		}
	}
	#location_container{
		width: 8rem;
		height: 0.8rem;
		line-height: .9rem;
		background: #f3f3f3;
		border-radius: 0.05rem;
		margin-top: .27rem;
		padding-left: .4rem;
		input{
			font-size: 0.37rem;
			width: 1.3rem;
			border: none;
			background: #f3f3f3;
		}
		span{
			color: #b5b5b5;
		}
	}
	#direction_container{
		width: 8rem;
		margin-top: .27rem;
		display: flex;
		justify-content: space-between;
		span{
			width: 1.71rem;
			height: 0.64rem;
			line-height: .64rem;
			text-align: center;
			background: #f3f3f3;
			color: #d3d3d3;
			border-radius: 0.05rem;
			&.active{
				background: #6db1ff;
				color: #fff;
			}
		}
	}
</style>